<template>
	<view class="pages">
		<u-navbar leftIconSize='30rpx'  :placeholder="true" title="我的关注"
			@leftClick="$utils.back()" border>
		</u-navbar>

		<view class="box">
			<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
				:default-page-no="1" :default-page-size="10">
				<template v-if="loading">
					<view v-for="(item,index) in 12" :key="index" class="userBox" >
						<view style="width: 80rpx;height: 80rpx;border-radius: 100%;"  class="Skeleton"/>
						<view>
							<view style="width: 200rpx;height: 36rpx;"  class="Skeleton"/>
							<view style="height: 36rpx;"  class="Skeleton"/>
						</view>
					</view>
				</template>
				<template v-else>
					<view v-for="(item,index) in data" :key="index" class="userBox" @click="jumpUser(item.id)" >
						<u-avatar mode='aspectFill' :src="item.avatar" size="80rpx"></u-avatar mode='aspectFill'>
						<view>
							<u--text :lines="1" :text="item.nick_name" size='26rpx'></u--text>
							<view>
								手机号：{{item.mobile}}
							</view>
						</view>
					</view>
				</template>
			</z-paging>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				data: []
			}
		},
		methods: {
			jumpUser(id){
				this.$utils.navigateTo({
					url:'/User/center?id='+id
				})
			},
			query(page, size) {
				let obj = {
					page: page,
					size: size
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.My.Followings(obj).then(res => {
					this.$refs.paging.complete(res.data.followings.data)
					uni.hideLoading()
					this.loading = false
				}).catch(err => {
					this.$refs.paging.complete([])
					uni.hideLoading()
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.Skeleton {
		background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
		background-size: 400% 100%;
		border-radius: 3px;
		animation: loading 1.5s infinite;
	}
	
	@keyframes loading {
		/* 骨架屏的动画 */
	
		0% {
			background-position: 100% 50%;
		}
	
		100% {
			background-position: 0 50%;
		}
	}
	.pages {
		display: flex;
		flex-direction: column;
		height: 100vh;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);

	}

	.box {
		flex: 1;
		box-sizing: border-box;
		padding: 0rpx 40rpx;
		
	}
	.userBox{
		display: flex;
			align-items: center;
		>view:nth-child(2){
			height: 80rpx;
			flex: 1;
			box-sizing: content-box;
			border-bottom: 1rpx solid #f5f5f5;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 26rpx;
			margin: 10rpx 0 10rpx 10rpx;
			padding-bottom:10rpx ;
			color: #bbb;
		}
	}
</style>